import {designPage, reactive} from "plain-design-composition";
import data from "../../../data/data-1.json";
import {DemoRow} from "../../Demo/DemoRow";
import {Adc, AdcGroup, AdcIndex, Checkbox, Form, FormItem, InputNumber, Switch} from "../../../../packages";
import AntdTable from "../../../../packages/components/AntdTable";

export default designPage(() => {

  const state = reactive({
    data,
    other: {
      hasSummary: true,
      groupHead: true,
    },
    props: {
      headRowHeight: 45,
      bodyRowHeight: 40,
      bordered: true,
      virtual: false,
    },
    plc: {
      width: 200,
      align: 'left',
      init: true,
      hide: undefined,
    },
  });

  return () => (
    <div>
      <DemoRow title={'基本用法'}>
        <Form column={1}>
          <FormItem label={'列宽度响应测试'}>
            <InputNumber v-model={state.plc.width} step={100}/>
          </FormItem>
          <FormItem label="表头行高">
            <InputNumber v-model={state.props.headRowHeight} step={5}/>
          </FormItem>
          <FormItem label="表体行高">
            <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
          </FormItem>
          <FormItem label="列销毁测试(名称)">
            <Switch v-model={state.plc.init}/>
          </FormItem>
          <FormItem label="带边框">
            <Checkbox v-model={state.props.bordered}/>
          </FormItem>
          <FormItem label="合计行">
            <Switch v-model={state.other.hasSummary}/>
          </FormItem>
          <FormItem label="表头分组">
            <Switch v-model={state.other.groupHead}/>
          </FormItem>
          <FormItem label="启用虚拟滚动">
            <Switch v-model={state.props.virtual}/>
          </FormItem>
          {!!state.other.groupHead && <>
            <FormItem label="hide:(评分)">
              <Switch v-model={state.plc.hide}/>
            </FormItem>
          </>}
        </Form>
      </DemoRow>
      <DemoRow title={'固定列'}>
        <AntdTable
          dataSource={data}
          {...state.props}
          showRows={10}
          pagination={false}
        >

          {!!state.other.groupHead && <>
            <AdcIndex/>
            <Adc title={'编号'} dataIndex={'id'} fixed={'left'} width={state.plc.width}/>
            <Adc title={'编号'} dataIndex={'id'}/>
            <Adc title={'大小'} dataIndex={'size'}/>
            <AdcGroup title={'地址'} fixed={'left'}>
              <Adc dataIndex="date" title="日期"/>
              <Adc dataIndex="color" title="颜色"/>
            </AdcGroup>
            <Adc title={'编号'} dataIndex={'id'}/>
            <Adc title={'评分'} dataIndex={'star'}/>
            <Adc title={'地址'} dataIndex={'addr'}/>

            {state.plc.init && <Adc title={'名称'} dataIndex={'name'}/>}
            <AdcGroup title={'站点'} fixed={'right'}>
              <Adc dataIndex={'url'} title={'链接'}/>
              <Adc dataIndex={'domain'} title={'域名'}/>
            </AdcGroup>

            <Adc title="协议" dataIndex="protocol"/>
            <Adc title="邮箱" dataIndex="email"/>
            <Adc title="ip" dataIndex="ip"/>
          </>}
          {!state.other.groupHead && <>
            <AdcIndex/>
            <Adc dataIndex="id" title="编号" fixed={'left'}/>
            <Adc dataIndex="size" title="大小"/>
            <Adc dataIndex="date" title="日期"/>
            <Adc dataIndex="color" title="颜色"/>
            {!!state.plc.init && <Adc dataIndex="name" title="名称" fixed={'right'}/>}
            <Adc dataIndex="star" title="评分"/>
            <Adc dataIndex="addr" title="地址"/>
            <Adc dataIndex="url" title="链接"/>
            <Adc dataIndex="domain" title="域名"/>
            <Adc dataIndex="protocol" title="协议"/>
            <Adc dataIndex="email" title="邮箱"/>
            <Adc dataIndex="ip" title="ip"/>
          </>}
        </AntdTable>
      </DemoRow>
    </div>
  );
});
